<template>
  <div class="mainBox" ref="basicMapbox">

  </div>
</template>

<script lang="ts" setup>
import 'mapbox-gl/dist/mapbox-gl.css';

import mapboxgl, { Map } from 'mapbox-gl'
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import {ref,onMounted} from 'vue'
// 获取到dom节点
const basicMapbox = ref<any>(null)
// 地图
let map: Map
// 初始化地图
const init = () => {
  //创建搜索对象
  mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg';
  map = new mapboxgl.Map({
    container: basicMapbox.value,
    style: "mapbox://styles/mapbox/satellite-v9",
    center: [119.51843975303827, 30.25005018362255],
    zoom: 10,
    minZoom: 8,
  })
  // 汉化
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));

}

onMounted(()=>{
  init()
})
</script>

<style lang="scss" scoped>
.mainBox {
  width: 100vw;
  height: 100vh;
  // background-color:red
}
</style>